<template>
  <el-dialog style="margin-top: 99px!important;" title="人员选择" v-model="open" width="35%" height="65%" append-to-body>
    <el-row>
       <el-col :span="10" :xs="24">
          <div class="head-container">
             <el-input
                v-model="deptName"
                placeholder="请输入组织名称"
                clearable
                prefix-icon="Search"
                style="margin-bottom: 20px"
             />
          </div>
          <div class="head-container">
             <el-tree
                :data="deptOptions"
                :props="{ label: 'deptName', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="deptTreeRef"
                node-key="deptId"
                highlight-current
                default-expand-all
                @node-click="handleNodeClick"
             />
          </div>
       </el-col>
       <!--用户数据-->
       <el-col :span="14" :xs="24">
        <el-table :data="userList" @current-change="handleRadioChange">
          <el-table-column align="center" width="55" label="">
            <template #default="scope">
                <el-radio v-model="templateSelection" :label="scope.row.userId+''" 
                @change="handleRadioChange(scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" key="nickName" prop="nickName" />
        </el-table>
       </el-col>
    </el-row>
    <el-divider  style="margin: 39px 0px 0px 0px; border-top : 1px solid #e8e8e8;"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="selectPeople">确 定</el-button>
        <el-button @click="cancelPeople">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { listAllMember } from "@/api/partybuilding/Member";
import { orgAllList } from "@/api/partybuilding/Org";
const props = defineProps({
  parentMethod: {
    type: Function,
    required: true,
    default: () => {}
  }
})
const { proxy } = getCurrentInstance();
const deptOptions = ref(undefined);
const userList = ref([]);
const open = ref(false);
const userIdList = ref([]);
const userNameList = ref([])
const dateRange = ref([]);
const deptName = ref("");
const templateSelection = ref("");
const data = reactive({
  queryPeopleParams: {
    pageNum: 1,
    pageSize: 900,
    deptId: null,
  }
});

const { queryPeopleParams } = toRefs(data);

const show = () => {
  open.value = true;
};

defineExpose({
  show
});


onMounted(() => {
  open.value = props.isOpen;
  getDeptTree();
})

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});

/** 查询部门下拉树结构 */
function getDeptTree() {
  orgAllList().then(response => {
    deptOptions.value = proxy.handleTree(response.rows, "deptId");
  });
};

/** 查询用户列表 */
function getPeopleList() {
  listAllMember(proxy.addDateRange(queryPeopleParams.value, dateRange.value)).then(res => {
    userList.value = res.data;
  });
};

/** 节点单击事件 */
function handleNodeClick(data) {
  queryPeopleParams.value.deptId = data.deptId;
  getPeopleList();
};


function handleRadioChange(row) {
    templateSelection.value = row.userId!=null?row.userId+'':null;
}


//人员点击
function handleClickPeople() {
  open.value = true;
  getPeopleList();
};

// 人员确定按钮
function selectPeople() {
  const userId = templateSelection.value;
  userIdList.value = userId;
  let userNames = userList.value.filter(item => userId==item.userId).map(item => item.nickName);
  userNameList.value = userNames!=null?userNames[0]:null;
  props.parentMethod(userIdList.value, userNameList.value);
  open.value = false;
}

// 人员取消按钮
function cancelPeople() {
  open.value = false;
}
</script>